<template>
    <div>
        <van-nav-bar id="reset" title="我的消息" left-arrow @click-left="backHandle" fixed z-index="100" />
        <div class="pageCon fuPage">

            <template v-if="list.length != 0">

                <div class="messageInfo" v-for="(item, index) in list" :key="index" @click="toSend(item)">
                    <img :src="item.userImg" alt="">
                    <div>
                        <div>
                            {{ item.name }} <span>{{ item.msgHistory.length != 0 ?
            item.msgHistory[item.msgHistory.length - 1].time
            || '立即沟通' : '立即沟通' }}</span>
                        </div>
                        <div v-if="item.msgHistory.length != 0 && item.msgHistory[item.msgHistory.length - 1].text">
                            {{ item.msgHistory[item.msgHistory.length - 1].name }}：{{
            item.msgHistory[item.msgHistory.length
                            - 1].text }}</div>
                        <div v-else>暂无聊天记录</div>
                    </div>
                </div>
            </template>

            <div class="emptyBox" v-else>
                <img src="../../assets/tip_content.png">
            </div>
        </div>
    </div>


</template>

<script>

import { listUsersByDoctor } from '../../network/aide'

export default {
    name: 'HomeR',
    data() {
        return {
            list: [],
            user: JSON.parse(localStorage.user),
            patientList: []
        }
    },
    mounted() {

    },
    methods: {


        toSend(obj) {
            this.$router.push({
                path: "/sendPage",
                query: {
                    info: obj
                },
            });
        },

        backHandle() {
            this.$router.back()
        },

        getPatientList() {
            listUsersByDoctor(
                {
                    userId: localStorage.userId,
                    userType: this.user.userType,
                    userName: ''
                }
            ).then(res => {
                if (res.flag) {
                    var list = []

                    if (localStorage.messageList) {
                        list = JSON.parse(localStorage.messageList)
                    }
                    res.data.forEach(ele => {
                        if (list.findIndex(x => x.id == ele.userId) == -1) {
                            list.push({
                                name: ele.userName,
                                id: ele.userId,
                                userImg: ele.userImg,
                                msgHistory: [],
                                userType: 0
                            })
                        }
                    })

                    this.list = list
                    localStorage.messageList = JSON.stringify(list)

                    console.log(this.list);
                }
            })
        }



    },
    created() {

        if (this.user.userType == 0) {
            this.list = JSON.parse(localStorage.messageList)
        } else if (this.userType != 0) {
            this.getPatientList()
        }



        console.log(this.list);



    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.pageCon {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
}

.messageInfo {
    box-sizing: border-box;
    padding: 24px 36px 24px 32px;
    display: flex;
    align-items: center;
    width: 100%;


}

.messageInfo>img {
    margin-right: 24px;
    width: 88px;
    height: 88px;
    // background: #000000;
    border-radius: 50%;
}

.messageInfo>div {
    display: flex;
    // align-items: center;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    height: 134px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32px;
    color: #333333;
    line-height: 32px;
    border-bottom: 1px solid #ccc;
}

.messageInfo>div>div:first-child {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.messageInfo>div>div:first-child>span,
.messageInfo>div>div:nth-child(2) {
    font-size: 24px !important;
    color: #999999 !important;
}

.messageInfo>div>div:nth-child(2) {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}


.emptyBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.emptyBox>img {
    margin-top: 400px;
    width: 374px;
    height: 314px;
}
</style>